<template>
  <view class="container">
    <tui-picture-cropper :lockRatio="true" :imageUrl="imageUrl" @ready="ready" @cropper="cropper"></tui-picture-cropper>
  </view>
</template>

<script>
import { baseHostURL } from "@/utils/config";
export default {
  data () {
    return {
      src: '',
      imageUrl: '' //要裁剪的图片
    };
  },
  onLoad (options) {
    this.src = options.src || '';
    //如果从上个页面传值时可显示loading
    this.src &&
      uni.showLoading({
        title: '请稍候...',
        mask: true
      });
  },
  methods: {
    ready () {
      this.imageUrl = this.src;
    },
    cropper (e) {
      //console.log(e);
      //裁剪完成后处理逻辑
      // uni.previewImage({
      // 	current: '', // 当前显示图片的http链接
      // 	urls: [e.url] // 需要预览的图片http链接列表
      // });
      // let token = uni.getStorageSync("token");
      let url = baseHostURL + "/api/file/upload";
      // alert(JSON.stringify(url))
      var _this = this;
      uni.uploadFile({
        url: url,
        filePath: e.url,
        name: "file",
        header: {
          "token": '',
        },
        formData: {},
        async success (res) {
          let rs = JSON.parse(res.data);
          // alert(JSON.stringify(rs))
          if (rs.code != 200) {
            _this.func.error(rs.msg, -1);
            return;
          }
          uni.$emit('updateImg', rs.file[0])
          _this.func.success("上传成功", -1);
        },
        fail (err) {

        },
      });
    }
  }
};
</script>

<style></style>
